// 组件: zj-tab 标签
// ==================== 参数 ====================
// ※ value ==> 双向绑定v-model, 当前值
// ※ model ==> 双向绑定时父组件的键名
// ※ listData ==> 列表数据, 可传纯数组 (默认: [])
// ※ valKey ==> 绑定值对应键名 (默认: 'id')
// ※ labKey ==> 显示值对应键名 (默认: 'name')
// ※ type ==> 类型 button/underline/borderButton (默认: 'button')
// ※ isAverage ==> tab是否均分 (默认: false)
// ==================== 事件 ====================
// ※ bind:model="model(e)" ==> 双向绑定
// ※ bind:change="change(e)" ==> 改变事件
// ==================== 插槽 slot ====================
// ※ 默认插槽 ==> xxxxx
// ==================== 方法 ====================
// ※ xxxxx ==> xxxxx

Component({
  properties: {
    value: { // 当前值
      type: Object, // 没用, 这个设定太弱智了
      optionalTypes: [String, Number, Object]
    },
    model: { // 双向绑定时父组件的键名
      type: String
    },
    type: { // 类型 underline/borderButton
      type: String,
      value: 'underline'
    },
    options: { // 数据, 仅做传递使用
      type: Array,
      value: []
    },
    valKey: { // 绑定值对应键名
      type: String,
      value: 'id'
    },
    labKey: { // 显示值对应键名
      type: String,
      value: 'name'
    },
    isAverage: { // tab是否均分
      type: Boolean, // 没用, 这个设定太弱智了
      optionalTypes: [String, Number, Boolean],
      value: false
    }
  },
  data: {
    value_child: null,
    index: null, // 当前选中值索引
    tabWidth: [], // 所有tab的宽度
    tabLeft: [] // 所有距离左边的距离
  },
  observers: {
    // ========== 监听'value', 双向绑定 ==========
    'value': function (value) {
      if (!this.properties.options.length) return
      const value_child = this.data.value_child
      if (value === value_child && value !== null && value_child !== null) return
      const valKey = this.properties.valKey
      const options = this.properties.options
      const index = options.findIndex(b => b === value || b + '' === value || b[valKey] === value || b[valKey] + '' === value)
      this.setData({ value_child: value, index })
    },
    // ========== 监听'options' ==========
    'options': function (options) {
      if (!options.length) return
      this.getRadioDomInfo() // 获取tabDOM信息
      this.setData({ value: this.data.value })
    }
  },
  methods: {
    val (val1, val2) {
      return (val1 || val1 === 0 || val1 === false || val1 === null) ? val1 : val2
    },
    // ========== 获取tabDOM信息  ==========
    getRadioDomInfo () {
      const options = this.properties.options
      const type = this.properties.type
      if (!options.length || type !== 'underline') return
      let tabWidth = []
      let tabLeft = []
      wx.nextTick(() => {
        const els = wx.createSelectorQuery().in(this)
        els.selectAll('#zj-tab').boundingClientRect((res) => {
          const left = res[0] ? res[0].left : 0
          res.forEach(b => {
            tabWidth.push(b.width)
            tabLeft.push(b.left - left)
          })
          this.setData({ tabWidth, tabLeft })
        }).exec()
      })
    },
    // ========== 触摸事件 ==========
    tap (e) {
      const i = e.currentTarget.dataset.i
      const b = e.currentTarget.dataset.b
      const valKey = this.properties.valKey
      const value = this.val(b[valKey], b)
      if (value === this.properties.value) return
      this.setData({ value_child: value, index: i })
      this.triggerEvent('model', { value, model: this.properties.model })
      this.triggerEvent('change', { value, model: this.properties.model })
    }
  }
})